<template>
  <div id="main">
    <Aside/>
    <div id="content">
      <div class="panel">
        <div class="header topic_header">
          <span class="topic_full_title">{{topic.title}}</span>
          <div class="changes">
            <span> 发布于 {{topic.create_at.substring(0,10)}}</span>
            <span> 作者 <a href="/user/enzeberg">{{topic.author.loginname}}</a></span>
            <span> {{topic.visit_count}} 次浏览</span>
            <span> 最后一次编辑是 {{topic.last_reply_at.substring(0,10)}}</span>
            <span> 来自 {{formatType[topic.tab]}}</span>
          </div>
        </div>
        <div class="inner topic">
          <div class="topic_content" v-html="topic.content"></div>
        </div>
      </div>

      <div class="panel">
        <div class="header">
          <span class="col_fade">{{topic.replies.length}} 回复</span>
        </div>
        <div v-for="(item,index) in topic.replies" class="cell reply_area reply_item">
          <div class="author_content">
            <a href="/user/i5ting" class="user_avatar">
              <img :src="item.author.avatar_url" :title="item.author.loginname">
            </a>
            <div class="user_info">
              <a class="dark reply_author" href="/user/i5ting">{{item.author.loginname}}</a>
              <a class="reply_time" href="#60535471dac5420e83e2836c"> {{index+1}}楼 • {{item.create_at.substring(0,10)}}</a>
            </div>
            <div class="user_action">
              <span>
                <i class="fa up_btn  fa-thumbs-o-up" title="喜欢"></i>
                <span class="up-count" v-if="item.ups.length">{{item.ups.length}}</span>
              </span>
              <span @click="handleReplie({reply_id:item.id,reply_name:item.author.loginname})"><i class="fa fa-reply reply2_btn" title="回复"></i></span>
            </div>
          </div>
          <div class="reply_content from-i5ting" v-html="item.content"></div>
          <div class="clearfix">
            <div class="reply2_area"></div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="header">
          <span class="col_fade">添加回复</span>
        </div>
        <div class="inner reply">
          <div id="reply_form">
            <div class="markdown_editor in_editor">
              <div class="markdown_in_editor">
                <div class="editer" contentEditable="true"></div>
                <div class="editor_buttons">
                  <button class="span-primary submit_btn" @click="handleSubmitReplie">提交</button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Aside from './../../components/Aside/Aside'
  import {topic,createReplie} from "../../assets/js/api";

  export default {
    components:{
      Aside
    },
    head(){
      return {
        title:this.topic.title,
        meta:[
          { hid: 'description', name: 'description', content: this.topic.title }
        ]
      }
    },
    data() {
      return {
        formatType:{
          good:'精华',
          share:'分享',
          ask:'问答',
          job:'招聘'
        },
        replie:{
          content:'',
          reply_id:''
        }
      }
    },
    async asyncData({$axios,params}){
      let data = await topic({axios:$axios,params});
      return {
        topic:data
      }
    },
    methods:{
      //回复
      handleReplie({reply_id = undefined,reply_name} = {}){
        this.replie.reply_id = reply_id;
        document.querySelector('.editer').innerHTML = '@'+reply_name;
      },
      //提交回复
      handleSubmitReplie(){
        let {id} = this.$route.params;
        this.replie.content = document.querySelector('.editer').innerHTML;
        if(!this.replie.content){
          this.$_toast('回复内容不能为空！')
          return
        }
        createReplie({axios: this.$axios,content:this.replie.content,id,reply_id:this.replie.reply_id}).then((data)=>{
          this.$_toast('回复成功！')
          window.location.reload();
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .editer{height: 150px;border: 1px solid #eee;outline: none;padding: 5px;line-height: 20px;}
</style>
